import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './store/actions/counter'
// 一旦用了 react-redux，获取（useSelector）和修改数据（useDispatch）的方式都变了

export default function App() {
  // state => 整个应用的状态
  // !#3 获取数据
  const count = useSelector((state) => state)
  // !#4 修改数据
  const dispatch = useDispatch()
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => dispatch(increment(1))}>+1</button>
      <button onClick={() => dispatch(increment(5))}>+5</button>
      <button onClick={() => dispatch(decrement(1))}>-1</button>
      <button onClick={() => dispatch(decrement(5))}>-5</button>
    </div>
  )
}
